<template>
  <el-dialog
    v-model="state.dialogVisible"
    :append-to-body="true"
    :before-close="close"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    :destroy-on-close="true"
    top="5vh"
    :modal="model"
    :title="state.dialogTitle"
    :width="width"
  >
    <el-form
      ref="formRef"
      class="rich-text-editor-container"
      label-position="top"
      :model="state.formData"
      :rules="state.formRules"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="标题:" prop="title">
            <el-input
              v-model="state.formData.title"
              :maxlength="32"
              :show-word-limit="true"
              type="text"
            />
          </el-form-item>
        </el-col>
        <el-col :offset="2" :span="10">
          <el-form-item label="有效截止日期:" prop="validEndTime">
            <el-date-picker
              v-model="state.formData.validEndTime"
              :editable="false"
              type="date"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item class="vab-quill-content" prop="noticeContent">
            <WangEditor
              :height="320"
              :init-value="state.formData.noticeContent"
              @change="onEditorChange"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button icon="circle-close" type="warning" @click="close">
        取消
      </el-button>
      <el-button icon="circle-check" type="primary" @click="save">
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup name="NoticeEdit">
import { useMessage } from "@/hooks/message";
import { addNotice, updateNotice } from "@/api/admin/message/notice/";
import { dateFormat } from "@/utils/common";
import WangEditor from "@/components/Editor/index.vue";

const props = defineProps({
  title: {
    type: String,
    default: "公告"
  },
  width: {
    type: String,
    default: "40%"
  },
  model: {
    type: Boolean,
    default: true
  }
});
const emits = defineEmits(["confirm"]);

const formRef = ref(null);

const state = reactive({
  dialogTitle: props.title,
  dialogVisible: false,
  operationAdd: false,
  formData: {
    id: "",
    title: "",
    noticeContent: "",
    validEndTime: "",
    status: "0"
  },
  formRules: {
    title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
    validEndTime: [
      {
        required: true,
        message: "有效截止日期不能为空",
        trigger: "blur"
      }
    ],
    noticeContent: [
      { required: true, message: "内容不能为空", trigger: "blur" },
      { max: 2048, message: "内容长度超出限制", trigger: "blur" }
    ]
  }
});

const show = row => {
  if (row) {
    state.dialogTitle = `修改${props.title}`;
    state.formData.id = row.id;
    state.formData.title = row.title;
    state.formData.validEndTime = dateFormat(null, null, row.validEndTime);
    state.formData.noticeContent = row.noticeContent;
    state.formData.status = row.status;
  } else {
    state.operationAdd = true;
    state.dialogTitle = `新增${props.title}`;
  }
  state.dialogVisible = true;
};

const close = () => {
  state.operationAdd = false;
  state.dialogTitle = props.title;
  state.formData = {
    id: "",
    title: "",
    validEndTime: "",
    noticeContent: "",
    status: "0"
  };
  state.dialogVisible = false;
};

const save = () => {
  formRef.value.validate(async valid => {
    if (valid) {
      let data;
      if (state.operationAdd) {
        data = await addNotice(state.formData);
      } else {
        data = await updateNotice(state.formData);
      }
      if (data && data.code && data.code === 200) {
        useMessage().success(data.msg);
        emits("confirm", {});
        close();
      } else {
        useMessage().warning(data.msg);
      }
    }
  });
};

const onEditorChange = (arr, html) => {
  state.formData.noticeContent = html;
};

defineExpose({
  show,
  close,
  save
});
</script>

<style lang="scss" scoped>
.el-input__inner {
  width: 140px;
}

.rich-text-editor-container {
  .vab-quill-content {
    :deep() {
      .el-form-item__content {
        line-height: normal;
      }
    }
  }
}
</style>
